import React, { useState, useEffect } from 'react'
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { LeftBar , MainContent , MyTop  ,PlaylistInfo} from './components'
import { Grid } from '@material-ui/core';

const useStyles = makeStyles(theme => ({
    root: {
        height: '100%',
        width: '100%',
        overflow: 'hidden',
        background:"#000"
    },

}));

function EditPlaylist(props) {
    const { data, className, ...rest } = props;
    const classes = useStyles();

    return (
        <div className={clsx(classes.root)} >
            {/* <Grid container>
                <Grid item xs={12} md={2}>
                    <LeftBar />
                </Grid>
                <Grid item xs={12} md={10}></Grid>
            </Grid> */}
            <MainContent />
            <PlaylistInfo />
        </div>
    )
}

EditPlaylist.propTypes = {
    /**
     * External classes
     */
    className: PropTypes.string,
};

export default EditPlaylist

